<template>
  <view class="page">
    <view class="search-box">
      <input
        v-model.trim="keyword"
        class="search-input"
        placeholder="请输入关键字"
        @focus="showHistory = true"
        @blur="onBlur"
      />
      <button class="search-button" @click="handleSearch">搜索</button>
    </view>

    <view v-if="list.length" class="list">
      <view
        class="item"
        v-for="item in list"
        :key="item.id"
        @click="goInfo(item)"
      >
        <view class="item-type">{{ item.type === "buy" ? "买" : "卖" }}</view>
        <view class="item-message">{{ item.message }}</view>
      </view>
    </view>

    <view v-else class="empty">
      <text>暂无数据</text>
    </view>

    <!-- 
      v-show 的问题，uniapp 环境下有不兼容

      当前元素设置了 display: flex ，然后css权重比默认的大，所以样式被覆盖掉了

      解决方案：将默认的权重提高
        view[hidden] {
          display: none !important;
        }
    -->
    <!-- 
      搜索历史的数据一般都是存储在本地的。uni.setStorage  uni.getStorage
     -->
    <view v-show="showHistory" class="search-history">
      <view class="search-history__title">搜索历史</view>
      <view class="search-history__list">
        <view
          class="search-history__item"
          v-for="(item, index) in history"
          :key="index"
          @click="quickSearch(item)"
        >
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const list = ref<any[]>([]); // 搜索结果集合
const keyword = ref(""); // 搜索关键字
const showHistory = ref(false); // 搜素历史面板显示与否
// history的默认值，是取得本地存储，如果获取不到，就设置一个空数组
const history = ref<string[]>(uni.getStorageSync("history") || []); // 搜索记录

const getList = (keyword: string) => {
  uni.request({
    url: "http://localhost:3000/trades",
    method: "GET",
    data: {
      q: keyword,
    },
    success: ({ data }) => {
      console.log("===", data);
      // 将 data 赋值给 list
      list.value = data as any[];
    },
  });
};

const goInfo = (data: any) => {
  uni.navigateTo({
    url: `/pages/info/info?id=${data.id}`,
  });
};

// 处理搜索点击
const handleSearch = () => {
  // 将关键字写入 history
  if (keyword.value.trim()) {
    // 两个问题
    //    1. 最新的放前面，使用 unshift
    //    2. 长度的限制，最大限制 3个 。如何做？
    history.value.unshift(keyword.value);
    history.value = history.value.splice(0, 3);
    // 还需要做一下本地存储
    uni.setStorageSync("history", history.value);
  }

  // 调用接口搜索
  getList(keyword.value);
};

// 处理失去焦点事件
const onBlur = () => {
  setTimeout(() => {
    showHistory.value = false;
  }, 100);
};

// 搜索历史点击，实现快速搜索功能
const quickSearch = (str: string) => {
  console.log("quickSearch", str);
  // 将 str 赋值给 keyword
  keyword.value = str;

  // 调用接口搜索
  getList(keyword.value);
};

onLoad(() => {
  // 默认调用一次接口
  getList("");
});
</script>

<style scoped>
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
  height: 100rpx;
  background-color: #ccc;
}

.search-input {
  flex: 1;
  padding: 0 20rpx;
  height: 80rpx;
  border: 1px solid #000;
  border-radius: 10rpx;
  background-color: #fff;
}

.search-button {
  margin-left: 20rpx;
}

.item {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #000;
}

.search-history {
  position: fixed;
  top: 140rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 500rpx;
  overflow-y: hidden;
  border: 1px solid #000;
  border-bottom-left-radius: 80rpx;
  border-bottom-right-radius: 80rpx;
  background-color: #fff;
}

.search-history__title {
  padding-left: 20rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 36rpx;
}

.search-history__list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.search-history__item {
  border: 1px solid #000;
  margin: 20rpx;
  padding: 0 20rpx;
  height: 72rpx;
  line-height: 72rpx;
}
</style>
